{% extends "base.html" %}

{% block subtitle %}
  Profile
{% endblock subtitle %}

{% block navbar_breadcrumb %}
  <ul class="nav navbar-nav oppia-navbar-breadcrumb">
    <li>
      <span class="oppia-navbar-breadcrumb-separator"></span>
      Profile
      <span class="oppia-navbar-breadcrumb-separator" style="padding-left: 10px;"></span>
      {{username}}
    </li>
  </ul>
{% endblock navbar_breadcrumb %}

{% block content %}
  <div class="container">
    <div class="row">
      <h1>Profile: {{username}}</h1>
    </div>

    <div class="row">
      <div role="form" class="form-horizontal">
        <div class="form-group">
          <label class="col-lg-2 col-md-2 col-sm-2">Picture</label>
          <div>
            {% if profile_picture_data_url %}
              <img src="{{profile_picture_data_url}}" class="img-thumbnail">
            {% else %}
              <img src="/images/general/no_profile_picture.png" class="img-thumbnail">
            {% endif %}
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div role="form" class="form-horizontal">
        <div class="form-group">
          <label class="col-lg-2 col-md-2 col-sm-2">Bio</label>
          <div>
            {% if user_bio %}
              {{user_bio}}
            {% else %}
              <em>This user has not supplied a bio yet.</em>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
